import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

import { BrowserRouter, Routes, Route, Link, Navigate } from 'react-router-dom'


function ReactDom() {
  return <>
    <h2>欢迎学习react课程 </h2>
    <Link to="/vite"><button>返回到Vite页面</button></Link>
    <Link to="/"><button>返回到首页方法一</button></Link>
    <Link to=".."><button>返回到首页方法二</button></Link>
  </>
}

function Vite() {
  return <>
    <h2>欢迎学习vite课程</h2>
  </>
}


function Test() {
  return <>
    {/* Navigate 在组件中使用的第二种方式 */}
    <h1>这是Test组件 <Navigate to="/"></Navigate></h1>
  </>
}

// 404 页面
function NotFound() {
  return <>
    <h1>404 页面不存在</h1>
    <Link to="/">
      <button>返回</button>
    </Link>
  </>
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  // 1.histoty路由  使用/react即可访问页面
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}></Route>
      <Route path="/react" element={<ReactDom />}></Route>
      <Route path="/vite" element={<Vite />}></Route>
      {/* Navigate 在路由中的使用 */}
      {/* 当我们访问 /home 页面时，我们把他重定向到 首页 */}
      {/* Navigate 也时一个组件 */}
      <Route path="/home" element={<Navigate to="/" />}></Route>


      <Route path='/test' element={<Test></Test>}></Route>

      {/* 404页面配置 */}
      <Route path='*' element={<NotFound></NotFound>}></Route>
    </Routes>
  </BrowserRouter>
)
